<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html class="no-js">
<head>
    <%@ include file="./../common/meta.jsp" %>
    <link rel="stylesheet" href="../../css/bbs.css">
    <style>
        [data-am-widget=tabs]{
            padding:0;
            margin:0;
        }
        .am-comment-avatar{
            width:40px;
            height:40px;
            background: #f1f1f1;
            border-radius:0;
        }
        .am-comment-hd{
            background: #fff;
            border: none;
        }
        .am-comment-main{
            background: none;
            border: none;
            margin-bottom:0;
        }
        .am-comment-main:before{
            border: none;
            font-size:0;
            height:0;
            background: none;
        }
        .am-comment-main:after, .am-comment-main:before{
            border: none;
            font-size:0;
            height:0;
            background: none;
        }
        .am-comment-meta{
            padding:0 10px;
        }
        .am-comment-meta a{
            color: #314979;
            font-size:16px;
            font-weight: normal;
        }
        .bbs-info-content{
            padding:0;
            font-size:16px;
            color: #3f3f3f;
            margin:0;
            line-height:28px;
        }
        .am-icon-comment{
            position: absolute;
            bottom: 0;
            right:0;
        }
        .am-icon-comment:before{
            content:'';
        }
        .bbs-comment-icon{
            top:0;
        }
        .am-icon-comment img{
            width:22px;
            height:15px;
        }
        .support-box,
        .comment-list{
            font-size:14px;
        }
        .am-comment-bd{
            padding:0;
        }
        .bbs-comment-main{
            position: relative;
            left:0;
            top:0;
            border-bottom:1px solid #f2f2f2;
            padding-bottom:15px;
            margin-bottom:15px;
        }
        .bbs-comment-icon{
            bottom:0;
            top:auto;
        }
        .fun-btn-box{
            right:24px;
        }
        .am-comment-bd{
            padding: 6px 0 0 10px;
        }
        .bigImg{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            height: 100%;
            background: #fff;
            text-align: center;
        }
        .bigImg img{
            top:25%;
            position: relative;
        }
        .bigImg a{
            display: inline-block;
            text-align: right;
            width:100%;
            top:20px;
            right:20px;
            position: relative;
        }
    </style>
</head>
<body>
<header data-am-sticky class="am-header am-header-default am-no-layout">
    <h1 class="am-header-title"></h1>
    <div class="am-header-right am-header-nav">
        <a href="../bbs/published.jsp?categoryCode=1" class="" id="published">
            <i class="am-header-icon am-icon-pencil"></i>
        </a>
    </div>
</header>













<div class="am-content">
    <div class="bbs-bg-box">
        <img class="bbs-bg" src="../../img/bbs-bg.jpg" alt="">
        <div class="bbs-img1">
            <img class="bbs-img1" src="../../img/bbs-img1.jpg" alt="" id="">
        </div>

    </div>
    <br>
    <div data-am-widget="tabs"
         class="am-tabs am-tabs-d2">
        <ul class="am-tabs-nav am-cf" id="bbsType">
            <%--<li class="am-active" value="1"><a href="[data-tab-panel-1]" onclick="addBbsList(1)">吐槽</a></li>--%>
            <%--<li class="" value="2"><a href="[data-tab-panel-2]" onclick="addBbsList(2)">秀一秀</a></li>--%>
            <%--<li class="" value="3"><a href="[data-tab-panel-3]" onclick="addBbsList(3)">分享</a></li>--%>
        </ul>

        <div class="am-tabs-bd">
            <div data-tab-panel-1 class="am-tab-panel am-active">
                <article class="am-comment" id="am-comment-1" offset="0" rows="10"> <!-- 评论容器 -->
                </article>
            </div>
            <div data-tab-panel-2 class="am-tab-panel ">
                <article class="am-comment" id="am-comment-2" offset="0" rows="10"> <!-- 评论容器 -->
                </article>
            </div>
            <div data-tab-panel-3 class="am-tab-panel ">
                <article class="am-comment" id="am-comment-3" offset="0" rows="10"> <!-- 评论容器 -->
                </article>
            </div>
        </div>
        <div align="center">

            <button class="am-btn am-btn-danger" id="addBbsList" onclick="moreBbsList()">加载更多</button>
        </div>
    </div>
</div>
<div class="my-comment-box" hidden="true" id="my-comment-box">
    <img class="my-img am-comment-avatar" src="../../img/index1-2.png" alt=""/>
    <div class="img-comment-textarea">
        <textarea class="textarea" rows="5" placeholder="想说点什么..." id="doc-ta-1"></textarea>
        <button type="button" class="am-btn am-btn-secondary" onclick="comment()">提交</button>
        <button type="button" class="am-btn am-btn-danger" onclick="closeDiv()">关闭</button>
    </div>
</div>
<%@ include file="./../common/footerNav.jsp" %>
<%@ include file="./../common/footer.jsp" %>
<script id="bbs-detail-list" type="text/x-handlebars-template">
    {{#each bbsDetailList}}

    <a href=""><img src="{{headImage}}" class="am-comment-avatar"
                    alt=""> <!-- 评论者头像 --></a>
    <div class="bbs-comment-main">
    <div class="am-comment-main" id="am-comment-main-{{id}}"> <!-- 评论内容容器 -->
        <header class="am-comment-hd"><!--<h3 class="am-comment-title">评论标题</h3>-->
            <div class="am-comment-meta comment-box"> <!-- 评论元数据 --><a href="#link-to-user" class="am-comment-author">{{nickname}}</a>
                <!-- 评论者 --><p class="bbs-info-content">{{content}}</p>
                <div class="img-box">
                    {{#each bbsImgList}}
                    <img src="{{url}}" alt="">
                    {{/each}}
                </div>
                <%--<time class="bbs-time" datetime="">2分钟前</time>--%>



            </div>
        </header>
        <div class="am-comment-bd">
            <div class="support-box"><span class="am-icon-heart-o"></span><a href="" id="zanName" value="{{zanNameString}}">{{zanNameString}}</a></div>
            <div class="comment-list" id="comment-list-{{id}}"></div>
        </div>
        <!-- 评论内容 -->
        <span class="am-icon-comment am-icon-sm bbs-comment-icon" onclick="zanAndComment('{{id}}')">
                    <img src="../../img/bbs-img2.png" alt="">
                </span>
        <div class="fun-btn-box" hidden="true" id="zan-comment">
            <div class="am-btn-group">
                <button type="button" class="am-btn am-btn-primary am-radius" onclick="zan('{{id}}')"><span
                        class="am-icon-heart-o" id="zan">赞</span></button>
                <button type="button" class="am-btn am-btn-primary am-radius" onclick="openComment('{{id}}',0,0)">
                    <span class="am-icon-comment-o" id="comment">评论</span></button>
            </div>
        </div>
        </div>
    </div>
    {{/each}}
</script>
<script id="bbs-comment-list" type="text/x-handlebars-template">
    {{#each bbsCommentList}}
    <div class="item">
        <a onclick="backComment('{{bbsDetailId}}','{{createId}}','{{createName}}')">{{createName}}{{#if toUserName}}</a>回复<a>{{toUserName}}{{/if}}</a>:{{content}}
    </div>
    {{/each}}
</script>
<script src="../../js/bbs/bbs.js"></script>
</body>
</html>